﻿<!DOCTYPE html>
<html lang="en">
    <head>
    <title id="Description">RangeSelector - Customized Markers</title> 
    <link type="text/css" rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxrangeselector.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // create jqxRangeSelector.
            $("#rangeSelector").jqxRangeSelector({
                width: 700, height: 100, min: 0, max: 200, range: { from: 10, to: 50}, majorTicksInterval: 20,
                markersFormatFunction: function (value, position) {
                    var side;
                    if (position == "left") {
                        side = "From";
                    } else if (position == "right") {
                        side = "To";
                    };
                    return side + ": <span>" + value.toFixed(0) + "</span>";
                }
            });
        });
    </script>
</head>
<body>
    <div id="rangeSelector">
    </div>
</body>
</html>
